﻿<!DOCTYPE html>
<html>

<head>
{include head_content}
	<!-- morris charts -->
	<link rel="stylesheet" href="View/CQQ/charts/css/morris.css">
	<!-- jvectormap -->
	<link rel="stylesheet" href="View/CQQ/css/jquery-jvectormap.css">
	<link rel="stylesheet" href="View/CQQ/css/jquery.jgrowl.css">
</head>

<body>

	{include right_set}
	<div class="wrapper">		
		<!-- Page Content -->
		<div id="content">
		{include h}
			<!-- Breadcrumb -->
			<!-- Page Title -->
			<div class="container mt-0">
				<div class="row breadcrumb-bar">
					<div class="col-md-6">
						<h3 class="block-title">系统状态</h3>
					</div>
					<div class="col-md-6">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="index.html">
									<span class="ti-home"></span>
								</a>
							</li>
							<li class="breadcrumb-item active">系统状态</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- /Page Title -->
			<!-- /Breadcrumb -->
			<!-- Main Content -->
			<div class="container home">
				<div class="row">
					<!-- Widget Item -->
					<div class="col-md-4">
						<div class="widget-area lochana-box-shadow color-green">
							<div class="widget-left">
								<span class="ti-pulse"></span>
							</div>
							<div class="widget-right">
								<h4 class="wiget-title">CPU</h4>
								<span class="numeric color-green" id="cpuDev">0GHz</span>
								<p class="inc-dec mb-0" id="cpuIdDev"></p>
							</div>
						</div>
					</div>
					<!-- /Widget Item -->
					<!-- Widget Item -->
					<div class="col-md-4">
						<div class="widget-area lochana-box-shadow color-green">
							<div class="widget-left">
								<span class="ti-server"></span>
							</div>
							<div class="widget-right">
								<h4 class="wiget-title">内存空间</h4>
								<span class="numeric color-green" id="memtTd">0GB</span>
								<p class="inc-dec mb-0" id="memDev"> 0%</p>
							</div>
						</div>
					</div>
					<!-- /Widget Item -->
					<!-- Widget Item -->
					<div class="col-md-4">
						<div class="widget-area lochana-box-shadow color-green">
							<div class="widget-left">
								<span class="ti-harddrives"></span>
							</div>
							<div class="widget-right">
								<h4 class="wiget-title">硬盘</h4>
								<span class="numeric color-green" id="hdtTd">0GB</span>
								<p class="inc-dec mb-0" id="hdDev"> 0%</p>
							</div>
						</div>
					</div>
					<!-- /Widget Item -->
				</div>

			</div>
			<!-- /Main Content -->
			<!--Copy Rights-->
			{include f}
			<!-- /Copy Rights-->
		</div>
		<!-- /Page Content -->
	</div>
	<!-- Back to Top -->
	<a id="back-to-top" href="#" class="back-to-top">
		<span class="ti-angle-up"></span>
	</a>
	<!-- /Back to Top -->
	<!-- Jquery Library-->
	<script src="View/CQQ/js/jquery-3.2.1.min.js"></script>
	<!-- Popper Library-->
	<script src="View/CQQ/js/popper.min.js"></script>
	<!-- Bootstrap Library-->
	<script src="View/CQQ/js/bootstrap.min.js"></script>
	<!-- morris charts -->
	<!---
		
		<script src="View/CQQ/charts/js/raphael-min.js"></script>
	<script src="View/CQQ/charts/js/morris.min.js"></script>
	<script src="View/CQQ/js/custom-morris.js"></script>
		---->
	
	<script src="View/CQQ/js/jquery.jgrowl.js"></script>

	<!-- Custom Script-->
	<script type="text/javascript">
		function refreshSysInfo(){
			$.get("?index/getSysInfo",{},  function(e){
				if(e.state){
					$("#memDev").html( "已用"+(e.info["mem_used"]/e.info["mem_total"]*100).toFixed(0)+"%");
					$("#memDev").attr("data-percent",(e.info["mem_used"]/e.info["mem_total"]*100).toFixed(0));
					$("#cpuDev").html( (e.info["cpu_us"]*1).toFixed(2)+"%");
					$("#cpuIdDev").html( "空闲"+(e.info["cpu_id"]*1).toFixed(2)+"%");
					$("#hdDev").html("已用"+e.info["hd_rate"]);
					$("#hdDev").attr("data-percent",e.info["hd_rate"]);
					$("#hdfTd").html(e.info["hd_avail"]+"GB");
					$("#hdtTd").html(e.info["hd_total"]+"GB");
					$("#memfTd").html((e.info["mem_buff"]+e.info["mem_free"]).toFixed(2)+"GB");
					$("#memtTd").html((e.info["mem_total"])+"GB");
				   // $('.chart').easyPieChart({animate: 1000});
				}else{
					$.jGrowl(e.info);
				}
		
			},'json');
		
		}
		
		(function ($) {
			"use strict"; // Start of use strict
			$('#sidebarCollapse').on('click', function () {
				$('#sidebar').toggleClass('active');
				$(this).toggleClass("ti-control-skip-backward ti-control-skip-forward");
			});
			/*Loader Javascript
			-------------------*/
			var window_var = $(window);
			window_var.on('load', function () {
				$(".loading").fadeOut("fast");
			});
			// scroll to top
			$(window).on('scroll',function () {
				if ($(this).scrollTop() > 50) {
					$('#back-to-top').fadeIn();
				} else {
					$('#back-to-top').fadeOut();
				}
			});
			// scroll body to 0px on click
			$('#back-to-top').on('click', function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
			// scroll to top End
		
			// theme color change
			var theme_settings = $(".theme-settings").find(".theme-color");
			theme_settings.on('click', function () {
				var val = $(this).attr('data-color');
				$('#style_theme').attr('href', 'css/' + val + '.css');
				$(".logo-change").attr('src', 'img/logo-' + val + '.png');
		
				theme_settings.removeClass('theme-active');
				theme_settings.addClass('theme-active');
				return false;
			});
			$(".theme-click").on('click', function () {
				$("#switcher").toggleClass("active");
				return false;
			});
			// theme color change End
		
			// fullscreen function
			$(".fullscreen").on('click', function () {
				if (document.webkitCurrentFullScreenElement == null) {
					document.documentElement.webkitRequestFullScreen();
				} else {
					document.webkitCancelFullScreen();
				}
			});
			// fullscreen function End
			//刷新首页上的设备信息
			refreshSysInfo();
		})(jQuery);
		
	</script>
</body>

</html>